<template>
  <div>
    
    <div class="header1">
      <div class="header">
        <el-form :inline="true" :model="formInline" class="demo-form-inline">
          <el-form-item>
            <el-button
              type="primary"
              size="small"
              style="margin-left: 5px"
              @click="add"
              
              >添加</el-button
            >
          </el-form-item>
          <el-form-item>
            <el-input v-model="gukeming" placeholder="请输入用户名"></el-input>
          </el-form-item>
          <el-form-item>
            <el-select v-model="gukeStatus" placeholder="请选择状态">
              <el-option label="正常" value="正常"></el-option>
              <el-option label="禁用" value="禁用"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" size="small" @click="chaxun"
              >查询</el-button
            >
          </el-form-item>
        </el-form>

        <!-- ---------------------------------------------------------------------------------------- -->

        <el-table :data="guke" style="width: 100%">
          <el-table-column prop="id" label="编号" width="180">
          </el-table-column>
          <el-table-column prop="username" label="用户名" width="180">
          </el-table-column>
          <el-table-column prop="realname" label="真实姓名"> </el-table-column>

          <el-table-column prop="telephone" label="手机号"> </el-table-column>
          <el-table-column prop="​gender" label="性别"> </el-table-column>
          <el-table-column prop="status" label="状态"> </el-table-column>
          <el-table-column prop="userFace" label="头像">
            <template slot-scope="scope">
              <el-popover trigger="hover" placement="top">
                <img width="250px" :src="scope.row.userFace" />
                <div slot="reference" class="name-wrapper">
                  <img width="60px" :src="scope.row.userFace" />
                </div>
              </el-popover>
            </template>
          </el-table-column>
          <el-table-column width="300px" label="操作" align="center">
            <template slot-scope="scope">
              <!-- 获取当前行的所有信息    scope.row -->
              <el-button
                @click="editHandler(scope.row)"
                size="mini"
                type="primary"
                >编辑</el-button
              >
              <el-button
                @click="deleteHandler(scope.row.id)"
                size="mini"
                type="danger"
                >删除</el-button
              >
              <el-button
              @click="xiangqing(scope.row.id)"
                size="mini"
                type="info"
                >详情</el-button
              >
            </template>
          </el-table-column>
        </el-table>

        <!-- ---------------------------------------------------------------------------------------- -->
        <!-- 模态框 -->
        <el-dialog title="添加人员信息" :visible.sync="dialogFormVisible"
          >{{ form }}

          <!-- 表单区域 -->
          <!-- :model 表单对象 最终我们要提交的那个表单对象 -->
          <!-- :rules 表单验证的规则 -->
          <!-- ref 类比与 id 最终通过ref找到这张表单 -->
          <el-form :model="form" ref="yuangongform">
            <el-form-item label="用户名:" :label-width="formLabelWidth">
              <el-input v-model="form.username" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="真实姓名:" :label-width="formLabelWidth">
              <el-input v-model="form.realname" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="手机号码:" :label-width="formLabelWidth">
              <el-input v-model="form.telephone" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="密码:" :label-width="formLabelWidth">
              <el-input v-model="form.password" autocomplete="off"></el-input>
            </el-form-item>

            <el-form-item label="性别:" :label-width="formLabelWidth">
              <el-radio v-model="form.gender" label="male">男</el-radio>
              <el-radio v-model="form.gender" label="remale">女</el-radio>
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="sumbit">确 定</el-button>
          </div>
        </el-dialog>

        <!-- ---------------------------------------------------------------------------------------- -->
        <div class="block" style="float: right">
          <el-pagination
            layout="prev, pager, next"
            :page-size="list.pageSize"
            :total="200"
            @current-change="changeHandler"
          >
            <!-- current-change  currentPage 改变时会触发	当前页 -->
          </el-pagination>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { get, post } from "../../utils/request";
import { mapState, mapActions } from "vuex";
import { login } from "@/api/user";
export default {
  data() {
    return {
      list: {
        page: 1,
        pageSize: 4,
      },
      //存储接口上的人员数据的一个数组
      guke: [],
      formInline: {
        user: "",
        region: "",
      },
      //模态框的宽度
      formLabelWidth: "120px",
      //模态框默认关闭
      dialogFormVisible: false,
      //模态框信息  需要对应接口的信息
      form: {
        username: "",
        realname: "",
        password: "",
        telephone: "",
        gender: "",
      },
      // 查询对象  
      gukeming: "",
      gukeStatus: "",
      gukedata: [],
      // 条件查询对象
      queryData: {},
      id:''
    };
  },
  computed: {
    //
    ...mapState("yuangong", ["yuangong", "total"]),
  },
  methods: {
    ...mapActions("yuangong", ["saveCategory", "deleteCategory"]),
    chaxun() {
      const data = {
        //属性名 要和/baseUser/pageQuery  里面的 一致
        roleId: this.id,
        status: this.gukeStatus,
        username: this.gukeming,
      };

      this.queryData = data;
      this.ymdata();
    },
    //添加
    add() {
      this.flag = 1
      // 清空表单对象
      this.form = {}
     
      // 设置模态框的标题
      this.dialogTitle = '添加员工'
      // 模态框显示出来
      this.dialogFormVisible = true
    },
    xiangqing(id){
     this.$router.push({
        path: 'details',
        query: { id }
      }) 
    },
    // 提交表单
    sumbit() {
      this.$refs["yuangongform"].validate(async (valid) => {
        if (valid) {
          // 模态框用flag      flag==1时   是进行添加      否则进行编辑      两个用的是同一个模态框
          // let只能在作用域内   var是方法里面定义
          if (this.flag == 1) {
            // 顾客的roleID 是6
            this.form.roleId = 1;
            console.log(this.form.userFace);
            var res = await post("/baseUser/addUserWidthRole", this.form);
          } else {
            var res = await post("/baseUser/saveOrUpdate", this.form);
          }
          // 发送表单验证的请求 提交表单对象

          // 给用户一个成功的提示
          if (res.status == 200) {
            this.$message({
              message: res.message,
              type: "success",
            });
            // 重新刷新页面的数据
            this.ymdata();
            // 调用关闭模态框的方法
            this.dialogClose();
          } else {
            this.$message.error(res.message);
          }
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    dialogClose() {
      // 重置表单  resetField	对该表单项进行重置，将其值重置为初始值并移除校验结果
      this.$refs["yuangongform"].resetFields();
      // 关闭模态框
      setTimeout(() => {
        this.dialogVisible = false;
      }, 200);
    },

    ymdata() {
      //异步操作     解构传参
      get("/baseUser/pageQuery", { ...this.list, ...this.queryData }).then(
        (res) => {
          if (res.status === 200) {
            this.guke = res.data.list;
          } else {
            this.$message({
              type: "error",
              message: res.message,
            });
          }
        }
      );
    },
    //分页
    changeHandler(page) {
      this.list.page = page;
      this.ymdata();
    },
    //编辑按钮
    editHandler(data) {
      // 将当前行的内容，赋值给我们的ruleForm
      this.form = data;
      console.log(data);
      this.title = "编辑信息";
      //打开模态框
      this.dialogFormVisible = true;
    },
    deleteHandler(id) {
      let params = {
        id,
      };
      this.deleteCategory(params).then((res) => {
        if (res.status === 200) {
          this.ymdata(this.list);
          this.$message({
            type: "success",
            message: res.message,
          });
        } else {
          this.$message({
            type: "error",
            message: res.message,
          });
        }
      });
    },
  },

  created() {
    this.ymdata();
  },
};
</script>
<style scoped>
</style>